<template>
  <li>
    <div :class="{bold:isFolder}" @click="toggle" @dblclick="changeFolder">{{treeData.name}}
      <span v-if="isFolder">[{{open?'-':'+'}}]</span>
    </div>
    <ul v-show="open" v-if="isFolder">
      <tree-item v-for="data in treeData.children" :treeData="data" :key="data.name">
      </tree-item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</template>
<script>
  export default{
    name: 'TreeItem',
    props: {
      treeData: Object
    },
    data() {
      return {
        open: false
      }
    },
    computed: {
      isFolder() {
        return this.treeData.children && this.treeData.children.length
      }
    }, 
    methods: {
      toggle() {
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      changeFolder() {
        if (!this.isFolder) {
          this.$set(this.treeData, 'children', [])
          this.addChild()
          this.open = true
        }
      },
      addChild() {
        this.treeData.children.push({name: 'new item'})
      }
    }
  }
</script>
<style lang="scss" scoped>
.bold{
  font-weight: bold;
}
</style>
